<template>
  <div class="panel" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'">
    <div v-if="$slots.header || header || title" class="panel__header" :style="headerStyle">
      <slot name="header">
        {{ header || title }}
        <slot name="widget" class="widget" />
      </slot>
    </div>
    <div class="panel__body" :style="bodyStyle">
      <slot />
    </div>
  </div>
</template>

<script>
//
export default {
  name: 'Panel',
  props: {
    header: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    headerStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    bodyStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    shadow: {
      type: String,
      default: ''
    }
  }
}
</script>
<style lang="scss" scoped>
.panel {
  box-shadow:0px 0px 10px 0px rgba(4,0,0,0.1);
  border-radius:4px;
  padding: 30px;

  &__header{
    border-bottom: 1px solid rgba(242,242,242,1);
    font-size: 16px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    padding: 15px;
    .widget {
      float: right;
    }

  }
  &__body {
    padding: 10px;
  }
}
</style>
